<template>
  <div>
    <div class="werapp">
      <p>
        学生状态：
        <el-select
          v-model="value"
          placeholder="请选择"
          size="mini"
          class="inpt"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </p>
      <p>
        学生名称：<el-input
          type="text"
          placeholder="请输入学生关键字"
          size="mini"
          v-model="value2"
          class="inpt"
        />
      </p>
      <p>
        手机号 ：<el-input
          type="text"
          placeholder="请输入手机号"
          size="mini"
          v-model="value1"
          class="inpt"
        />
      </p>
      <p>
        <el-button
          slot="append"
          icon="el-icon-search"
          size="mini"
          @click="search"
          >搜索</el-button
        >
        <el-button
          slot="append"
          icon="el-icon-refresh-right"
          size="mini"
          @click="login"
          >重置</el-button
        >
      </p>
    </div>
    <table border="1" width="100%" cellspacing="0">
      <thead>
        <tr>
          <th><input type="checkbox" /></th>
          <th>学生名称</th>
          <th>手机号</th>
          <th>状态</th>
          <th>创建时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in list" :key="index">
          <td><input type="checkbox" /></td>
          <td>
            <img :src="item.avatar" alt="" />
            {{ item.nickname }}
          </td>
          <td>{{ item.mobile }}</td>
          <td>{{ item.status ? "启用" : "禁用" }}</td>
          <td>{{ item.created_at | formDate }}</td>
          <td>
            <el-button type="text">详情</el-button>
            <el-button type="text">编辑</el-button>
            <el-button type="text">禁用</el-button>
            <el-button type="text">删除</el-button>
            <el-button type="text">重置密码</el-button>
          </td>
        </tr>
      </tbody>
    </table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagenum"
      :page-sizes="[1, 2, 3, 4]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
// import list from "../assets/list.json";
export default {
  data() {
    return {
      list: [],
      data: "",
      value: "",
      value1: "",
      value2: "",
      total: 0,
      pagesize: 3,
      pagenum: 1,
      options: [
        {
          value: "1",
          label: "启用",
        },
        {
          value: "0",
          label: "禁用",
        },
      ],
      value: "",
    };
  },
  created() {
    this.getdate();
  },
  methods: {
    async getdate() {
      var res = await this.$axios.get("/list.json");
      console.log(res.data);
      this.list = res.data;
      this.total = res.data.length;
      this.userdata();
    },
    login() {
      this.getdate();
    },
    /**
     * 分页
     */
    userdata() {
      let start = (this.pagenum - 1) * this.pagesize; //  开始截取
      let end = this.pagenum * this.pagesize; //  截取最后的位置
      this.list = this.list.slice(start, end); //  当前中间的数据
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pagesize = val;
      this.userdata();
      this.getdate();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pagenum = val;
      this.userdata();
      this.getdate();
    },
    /**
     * 搜索
     */
    search() {
       this.list = this.list.filter((item) => {
          return item.mobile.includes(this.value1)&&item.nickname.includes(this.value2)&&item.status == this.value;
        });
        this.value1 = "";
        this.value2="";
        this.value = "";
      // if (this.value1) {
      //   this.list = this.list.filter((item) => {
      //     return item.mobile.includes(this.value1);
      //   });
      // }
      // this.value1 = "";
      // if (this.value2) {
      //   this.list = this.list.filter((item) => {
      //     return item.nickname.includes(this.value2);
      //   });
      // }
      // this.value2 = "";
      // if (this.value) {
      //   console.log(this.value);
      //   this.list = this.list.filter((item) => {
      //     return item.status == this.value;
      //   });
      // }
      // this.value = "";
    },
    // nickname(e) {
    //   this.list = list.filter((item) => {
    //     return item.nickname.includes(e);
    //   });
    // },
    // mobile(e) {
    //   console.log(e);
    //   this.list = list.filter((item) => {
    //     return item.mobile.includes(e);
    //   });
    // },
  },
};
</script>

<style lang="scss" scoped>
.inpt {
  width: 200px;
}
.werapp {
  width: 100%;
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
  align-content: center;
  p {
    justify-content: space-between;
    display: flex;
    font-size: 13px;
  }
}
table {
  text-align: center;
  margin-top: 20px;
  tr {
    td {
      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
    }
  }
}
</style>